<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="x5-fullscreen" content="true">
    <meta name="full-screen" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>
    <title>皇家加勒比寻宝</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/dialog.css">
</head>
<body>
<script src="js/setFont.js"></script>
<div class="page pr">
    <a class="main-link-rules pa db" href="rules.html">
        <img src="img/icon-ques.png" alt="">
        活动规则
    </a>
    <!--顶部导航-->
    <div class="main-nav-wrap">
        <div class="main-nav-item main-nav-item1">
            <img src="img/nav-box.png" alt="" class="main-nav-box">
            <span class="main-nav-text">国际免费船票</span>
        </div>
        <div class="main-nav-item main-nav-item2">
            <img src="img/nav-box.png" alt="" class="main-nav-box">
            <span class="main-nav-text">国内免费船票</span>
        </div>
        <a class="main-nav-item main-nav-item3 centerX" href="https://www.rcclchina.com.cn/
">
            <img src="img/nav-home.png" alt="" class="main-nav-box main-nav-box3">
            <span class="main-nav-text">返回官网</span>
        </a>
        <div class="main-nav-item main-nav-item4">
            <img src="img/nav-box.png" alt="" class="main-nav-box">
            <span class="main-nav-text">定制行李箱</span>
        </div>
        <div class="main-nav-item main-nav-item5">
            <img src="img/nav-box.png" alt="" class="main-nav-box">
            <span class="main-nav-text">现金优惠券</span>
        </div>
    </div>
    <!--剩余寻宝次数-->
    <div class="remain-count pa tc centerX w100">
        <img class="remain-count-text" src="img/remain-count.png" alt="">
        <span class="remain-count-num">3</span>
    </div>
    
    <!--音乐播放-->
    <div class="music-box">
        <div class="bg-music music-pause"></div>
    </div>
    <!--四个场景-->
    <div class="swiper-container swiper-no-swiping" id="main-swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide pr">
                <div class="swiper-slide-inner">
                    <div class="main-view-image-bg pr">
                        <img class="main-view-image" src="img/view1.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="swiper-slide pr">
                <div class="swiper-slide-inner">
                    <div class="main-view-image-bg pr">
                        <img data-src="img/view3.jpg" alt="" class="main-view-image swiper-lazy">
                    </div>
                    </div>
            </div>
            <div class="swiper-slide pr">
                <div class="swiper-slide-inner">
                    <div class="main-view-image-bg pr">
                        <img data-src="img/view4.jpg" alt="" class="main-view-image swiper-lazy">
                    </div>

                </div>
            </div>
            <div class="swiper-slide pr">
                <div class="swiper-slide-inner">
                    <div class="main-view-image-bg pr">
                        <img data-src="img/view2.jpg" alt="" class="main-view-image swiper-lazy">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--四个点-->
    <div class="swiper-pagination main-pagination tc"></div>
    <!--左右按钮-->
    <div class="main-btn-change-wrap pa clearfix">
        <div class="main-btn-change c-white fl" id="prev">
            探索宝藏
        </div>
        <div class="fl main-gesture-wrap">
            <img src="img/dot-line.png" alt="" class="dot-line">
            <div class="pr">
                <img src="img/icon-gesture.png" alt="" class="pa icon-gesture">
            </div>
        </div>
        <div class="main-btn-change main-btn-next c-white fr" id="next">
            探索宝藏
        </div>
    </div>
    <!--场景名字-->
    <div class="main-bottom-title pa">
        <div class="main-location-name"><img class="user-avatar" src="img/avatar-female.png" alt=""><span>在寻宝地：</span><span id="location-name">皇家大道</span></div>
    </div>

    <!--底部通知-->
    <div id="scroll_div" class="main-notice-info pa">
        <div id="scroll_begin" class="inline">
            <span class="main-notice-item"><span class="c-white">恭喜用户173****4968获得了</span><span
                    class="c-yellow">现金优惠券1</span></span>
            <span class="main-notice-item"><span class="c-white">恭喜用户173****4968获得了</span><span
                    class="c-yellow">现金优惠券2</span></span>
        </div>
        <div id="scroll_end" class="inline"></div>
    </div>
    <!--首次进入页面 开始寻宝-->
    <div class="mask dn" id="staratMask">
        <div class="dialog-box-small pr animated zoomIn">
            <div class="dialog-close-btn pa"></div>
            <div class="dialog-describe" style="margin-top:3rem;">
                一年一度的3.22皇家游轮节开始啦！数不尽的宝藏就埋藏在船上，快和家人朋友一起加入寻宝队伍，找到专属您的幸运宝藏，开启超凡海上之旅吧！
            </div>
            <div class="dialog-describe-title tc" style="margin-top:1rem;">【宝藏待你来挖掘】</div>
            <div class="dialog-describe"><span class="dialog-describe-circle"></span>海外出发神秘之旅双人免费船票</div>
            <div class="dialog-describe"><span class="dialog-describe-circle"></span>中国出发神秘之旅双人免费船票</div>
            <div class="dialog-describe"><span class="dialog-describe-circle"></span>皇家定制版行李箱</div>
            <div class="dialog-describe"><span class="dialog-describe-circle"></span>现金优惠券</div>
            <div class="dialog-btn btn-close" style="margin:1rem auto;">马上去寻宝</div>
        </div>
    </div>
    <!--提示登录-->
    <!--animated zoomIn表示动画，dn表示隐藏-->
    <div class="mask dn" id="alert-login">
        <div class="dialog-box-small pr animated zoomIn">
            <div class="dialog-close-btn pa"></div>
            <div class="dialog-title dialog-title-login"></div>
            <div class="dialog-middle dialog-middle-king-logo" style="margin:1rem 0 1rem 0;height:2.9rem;"></div>
            <div class="dialog-describe">您还没有登录，由于本次活动奖品包含免费船票和现金优惠券，需要登陆皇家加勒比官网才能继续游戏！</div>
            <div class="dialog-btn" style="margin:1rem auto;">立 刻 登 陆</div>
        </div>
    </div>
    <!--导航对应弹窗-->
    <!--一等奖未中-->
    <div class="mask dn" id="mask-1-0">
        <div class="dialog-box pr animated zoomIn">
            <div class="dialog-close-btn pa"></div>
            <div class="dialog-title reward-level-first mg-title"></div>
            <div class="reward-content tc">您尚未获得该奖品</div>
            <img class="reward-logo" src="img/dialog/dialog-sea-room.png"/>
            <div class="reward-tips">乘坐皇家游轮海外港口出发的神秘之旅就埋在场景中，期待您的获取。了解更多详细信息请参考<a class="activity-rule"
                                                                                  href="rules.html">活动规则</a></div>
            <div class="dialog-btn tc dialog-no-reward btn-close">继续寻宝</div>
        </div>
    </div>
    <!--一等奖-->
    <div class="mask dn" id="mask-1-1">
        <div class="dialog-box pr animated zoomIn">
            <div class="dialog-close-btn pa"></div>
            <div class="dialog-title reward-first-get mg-title"></div>
            <div class="reward-content tc">新加坡出发4天3晚双人免费游轮之旅<br>航程：新加坡-马来西亚槟城-新加坡</div>
            <img class="reward-logo" src="img/dialog/dialog-sea-room.png"/>
            <div class="reward-tips">船名：海洋航行者号 <br>出航日期：2018/9/14-2018/9/17 <br>房型：双人阳台房&nbsp;&nbsp;可入住人数：2人 <br>具体信息将发送至您的邮箱，免费船票适用航线和房间类型以中奖短信和邮件为准，详细兑换说明请参照则<a
                    class="activity-rule"
                    href="rules.html">活动规则</a>
            </div>
            <div class="dialog-btn tc dialog-no-reward btn-close">继续寻宝</div>
        </div>
    </div>

    <!--二等奖未中-->
    <div class="mask dn" id="mask-2-0">
        <div class="dialog-box pr animated zoomIn">
            <div class="dialog-close-btn pa"></div>
            <div class="dialog-title reward-level-second mg-title"></div>
            <div class="reward-content tc">您尚未获得该奖品</div>
            <img class="reward-logo" src="img/dialog/dialog-sea-room.png"/>
            <div class="reward-tips">乘坐皇家游轮从中国港口出发的神秘之旅就埋藏 在场景中，期待您的获取。了解更多详细信息请 参考
                <a class="activity-rule" href="rules.html">活动规则</a>
            </div>
            <div class="dialog-btn tc dialog-no-reward btn-close">继续寻宝</div>
        </div>
    </div>

    <!--二等奖-->
    <div class="mask dn" id="mask-2-1">
        <div class="dialog-box pr animated zoomIn">
            <div class="dialog-close-btn pa"></div>
            <div class="dialog-title mg-title reward-second-get"></div>
            <div class="reward-content tc">中国出发6天5晚双人免费游轮之旅航程：上海-境港-长崎-上海</div>
            <img class="reward-logo" src="img/dialog/dialog-sea-room.png"/>
            <div class="reward-tips">船名：海洋量子号<br>出航日期：2018/6/9-2018/6/14<br>房型：高级家庭阳台房&nbsp;&nbsp;可入住人数：2人 <br>具体信息将发送至您的邮箱，免费船票适用房间和房间类型以中奖短信和邮件为准，详细兑换说明请参照<a
                    class="activity-rule" href="rules.html">活动规则</a></div>
            <div class="dialog-btn tc dialog-no-reward btn-close">继续寻宝</div>
        </div>
    </div>

    <!--三等奖未中-->
    <div class="mask dn" id="mask-3-0">
        <div class="dialog-box pr animated zoomIn">
            <div class="dialog-close-btn pa"></div>
            <div class="dialog-title mg-title reward-level-third"></div>
            <div class="reward-content tc">您尚未获得该奖品</div>
            <img class="reward-logo-third" src="img/dialog/dialog-hand-box.png"/>
            <div class="reward-tips">价值899元的皇家定制行李箱送就埋藏在场景中，期待您的获取。了解更多详细信息请参考<a
                    class="activity-rule" href="rules.html">活动规则</a></div>
            <div class="dialog-btn tc dialog-no-reward btn-close">继续寻宝</div>
        </div>
    </div>
    <!--三等奖-->
    <div class="mask dn" id="mask-3-1">
        <div class="dialog-box pr animated zoomIn">
            <div class="dialog-close-btn pa"></div>
            <div class="dialog-title mg-title reward-third-get"></div>
            <img class="reward-logo-third" src="img/dialog/dialog-hand-box.png"/>
            <div class="reward-tips">恭喜，请填写准确的收货信息以便寄送（奖品以实物为准）</div>
            <div class="user-info-box">
                <input class="user-info" type="text" placeholder="姓名">
                <input class="user-info" type="text" placeholder="手机号">
                <input class="user-info" type="text" placeholder="邮寄地址">
                <div class="protocol-box">
                    <input type="checkbox" checked="checked">
                    <p>同意<a href="">《用户协议》</a>和<a href="">《隐私政策》</a></p>
                </div>
            </div>
            <div class="dialog-btn tc dialog-no-reward">确认提交</div>
        </div>
    </div>


    <!--分享次数用完-->
    <div class="mask dn">
        <div class="dialog-box-small pr animated zoomIn">
            <div class="dialog-close-btn pa"></div>
            <div class="dialog-title dialog-share-none" style="margin-top:1rem"></div>
            <div class="dialog-describe tc" style="margin:1.5rem auto;">今天的分享次数已经用完啦，记得明天再来！</div>
            <div class="dialog-btn btn-close" style="margin:0.4rem auto;">确  认</div>
        </div>
    </div>

    <!--点击我的优惠券弹窗-->
    <div class="mask dn">
        <div class="dialog-box-small pr animated zoomIn" style="height:10.18rem;">
            <div class="dialog-close-btn pa"></div>
            <div class="dialog-describe" style="margin:1.5rem auto;">皇家游轮节精选活动航次震撼来袭，用券后预定更优惠！</div>
            <div class="dialog-btn-box" style="margin-top:.4rem;">
                <div class="dialog-btn tc db"><a style="color:#fff;" href="https://mobile.rcclchina.com.cn/privilege/cruisefestival322">立即查看</a></div>
                <div class="dialog-btn tc btn-close" data-refresh="1">稍后再说</div>
            </div>
        </div>
    </div>

    <!--我的船票优惠优惠券-->
    <div class="mask dn" id="mask-4-1">
        <div class="dialog-box-small pr animated zoomIn">
            <div class="dialog-close-btn pa"></div>
            <div class="dialog-title dialog-title-my-ticket" style="margin-top:2.5rem"></div>
            <div class="dialog-ticket-wrap-double">
                <div class="dialog-my-ticket dialog-my-ticket-600"></div>
                <div class="dialog-my-ticket dialog-my-ticket-600"></div>
                <div class="dialog-my-ticket dialog-my-ticket-400"></div>
                <div class="dialog-my-ticket dialog-my-ticket-none"></div>
            </div>
            <div class="dialog-describe">船票优惠优惠券的详细使用说明请参照<a style="color:#515a67;text-decoration: underline" href="rules.html">活动规则</a>，立即使用请点击上方优惠券图标</div>
            <div class="dialog-btn btn-close" style="margin:1rem auto;">继 续 寻 宝</div>
        </div>
    </div>
</div>


<script src="js/jquery.min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/main.js"></script>
<script src="js/weixin-js-sdk.js"></script>
</body>
</html>
